<template>
  <div class="theme-showcase-container">
    <a-card class="theme-card" title="协创视界主题色方案" :bordered="false">
      <a-space direction="vertical" size="large" fill>
        <a-typography-title :heading="3">主色调</a-typography-title>
        <div class="color-row">
          <div v-for="(color, index) in primaryColors" :key="index" class="color-block">
            <div class="color-sample" :style="{ backgroundColor: color.value }"></div>
            <div class="color-info">
              <div class="color-name">{{ color.name }}</div>
              <div class="color-code">{{ color.value }}</div>
            </div>
          </div>
        </div>

        <a-divider />

        <a-typography-title :heading="3">辅助色</a-typography-title>
        <div class="color-row">
          <div v-for="(color, index) in secondaryColors" :key="index" class="color-block">
            <div class="color-sample" :style="{ backgroundColor: color.value }"></div>
            <div class="color-info">
              <div class="color-name">{{ color.name }}</div>
              <div class="color-code">{{ color.value }}</div>
            </div>
          </div>
        </div>

        <a-divider />

        <a-typography-title :heading="3">功能色</a-typography-title>
        <div class="color-row">
          <div v-for="(color, index) in functionalColors" :key="index" class="color-block">
            <div class="color-sample" :style="{ backgroundColor: color.value }"></div>
            <div class="color-info">
              <div class="color-name">{{ color.name }}</div>
              <div class="color-code">{{ color.value }}</div>
            </div>
          </div>
        </div>

        <a-divider />

        <a-typography-title :heading="3">主题应用示例</a-typography-title>
        <div class="theme-examples">
          <div class="example-section">
            <a-space wrap>
              <a-button type="primary">主要按钮</a-button>
              <a-button>次要按钮</a-button>
              <a-button type="text">文本按钮</a-button>
              <a-button type="primary" status="success">成功按钮</a-button>
              <a-button type="primary" status="warning">警告按钮</a-button>
              <a-button type="primary" status="danger">危险按钮</a-button>
            </a-space>
          </div>

          <div class="example-section">
            <a-space wrap>
              <a-tag color="#4C8DFF">图片标签</a-tag>
              <a-tag color="#2CD19E">素材标签</a-tag>
              <a-tag color="#8E65FE">创意标签</a-tag>
              <a-tag color="#FF7D52">紧急标签</a-tag>
            </a-space>
          </div>

          <div class="example-section card-showcase">
            <a-card :style="{ width: '100%', maxWidth: '300px' }" title="素材预览">
              <template #extra>
                <a-button type="text">查看更多</a-button>
              </template>
              <div style="height: 150px; background-color: #f5f7fa; display: flex; align-items: center; justify-content: center;">
                <a-typography-text disabled>图片预览区域</a-typography-text>
              </div>
              <a-space direction="vertical" style="width: 100%; margin-top: 16px;">
                <a-typography-text>素材名称：创意设计稿</a-typography-text>
                <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                  <a-typography-text type="secondary">上传时间：2023-04-09</a-typography-text>
                  <a-typography-text type="secondary">分类：设计图</a-typography-text>
                </div>
              </a-space>
            </a-card>
          </div>
        </div>
      </a-space>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const primaryColors = ref([
  { name: '主色', value: '#4C8DFF' },
  { name: '主色浅', value: '#74A6FF' },
  { name: '主色深', value: '#2B6FF0' },
  { name: '主色超浅', value: '#E8F0FF' }
]);

const secondaryColors = ref([
  { name: '创作色', value: '#8E65FE' },
  { name: '协作色', value: '#2CD19E' },
  { name: '灵感色', value: '#FF7D52' },
  { name: '中性色', value: '#333945' }
]);

const functionalColors = ref([
  { name: '成功', value: '#00B42A' },
  { name: '警告', value: '#FF7D00' },
  { name: '错误', value: '#F53F3F' },
  { name: '信息', value: '#165DFF' }
]);
</script>

<style scoped>
.theme-showcase-container {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.theme-card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.color-block {
  display: flex;
  flex-direction: column;
  width: 160px;
  margin-bottom: 10px;
}

.color-sample {
  height: 80px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.color-info {
  padding: 4px;
}

.color-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.color-code {
  color: #86909c;
  font-family: monospace;
}

.theme-examples {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.example-section {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.card-showcase {
  display: flex;
  justify-content: center;
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .theme-card {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .theme-showcase-container {
    padding: 12px;
  }
  
  .color-block {
    width: calc(50% - 20px);
  }
  
  .example-section {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .theme-showcase-container {
    padding: 8px;
  }
  
  .color-block {
    width: 100%;
  }
  
  .theme-examples {
    gap: 16px;
  }
  
  .example-section {
    padding: 10px;
  }
}
</style> 